<template>
    <el-dialog class="ba-operate-dialog" :destroy-on-close="true" :model-value="['proList'].includes(baTable.form.operate!)" @close="baTable.toggleForm" width="70%" :style="{ height: '90vh',top:'-10vh !important'}">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? '奖品设置' : '' }}
            </div>
        </template>


        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar" style="height:85vh">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
      
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="baTable.form.labelWidth + 'px'"

                >
                    
                   <div style="margin-bottom: 20px">
           
                               <el-button type="primary" @click="dialogVisible = true">添 加</el-button>
                   </div>
 
                    <table class="table">
                         <tr>
                             <th width="80">序号</th>
                             <th width="80">ID</th>
                             <th width="80">图片</th>
                             <th style="text-align: left;">奖品</th>
                             <th>类型</th>
                             <th>关联值</th>
                             <th>数量</th>
                             <th>已中数量</th>
                             <th>剩余数量</th>
                             <th>中奖概率</th>
                             <th>排序</th>
                             <th>操作</th>
                         </tr>
                         <tr v-for="(item,index) in data">
                              <td>{{ index+1 }}</td>
                              <td>{{ item.id }}</td>
                             <td>
                                 <el-image :src="item.feng"></el-image>
                             </td>
                             <td style="text-align: left;">{{ item.title }}</td>
                             <td>
                                 <el-tag type="primary" v-if="item.type == 1">商品</el-tag> 
                                 <el-tag type="primary" v-if="item.type == 2">优惠券</el-tag> 
                                 <el-tag type="primary" v-if="item.type == 3">积分</el-tag> 
                                 <el-tag type="primary" v-if="item.type == 4">金额</el-tag>
                                 <el-tag type="primary" v-if="item.type == 10">自定义</el-tag>
                             </td>
                             <td>
                                <span v-if="item.type == 1">商品ID:{{ item.pro_id }}</span>
                                <span v-if="item.type == 2">券ID:{{ item.quan }}</span>
                                <span v-if="item.type == 3">{{ item.jifen }}</span>
                                <span v-if="item.type == 4">{{ item.money }}</span>
                             </td>
                             <td>{{ item.stock }}</td>
                             <td>{{ item.prize_num }}</td>
                             <td>{{ item.stock - item.prize_num }}</td>
                             <td>{{ item.probability }}</td>
                             <td>{{ item.sort }}</td>

                             <td>

                                <el-popconfirm
                                    width="220"
                                    confirm-button-text="确定"
                                    cancel-button-text="暂不"
                                    hide-after="0"
                                    title="确定删除吗?"
                                    @confirm ="delpro(item.id)"
                                >
                                    <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>

                                
                                 
                             </td>
                         </tr>
                       
                         
                    </table>
                </el-form>
            </div>
        </el-scrollbar>


        <el-dialog
            v-model="dialogVisible"
            title="添加奖品"
            width="45%"
        >
           <div style="padding: 25px;">

            <el-form label-width="130px">
                    <el-form-item label="奖品类型">
                        <el-radio-group v-model="form.type">
                            <el-radio value="1">商品</el-radio>
                            <el-radio value="2">优惠券</el-radio>
                            <el-radio value="3">积分</el-radio>
                            <el-radio value="4">金额</el-radio>
                            <el-radio value="10">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="选择商品" v-if="form.type == 1">
                        <el-select v-model="form.pro_id" placeholder="请选择产品">
                        <el-option :label="'¥'+item.price +' | '+ item.title" :value="item.id" v-for="(item,index) in pro"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="选择优惠券" v-if="form.type == 2">
                        <el-select v-model="form.quan" placeholder="请选优惠券">
                        <el-option :label="item.title" :value="item.id" v-for="(item,index) in quan"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="积分" v-if="form.type == 3">
                        <el-input v-model="form.jifen" type="number" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="金额" v-if="form.type == 4">
                        <el-input v-model="form.money" type="number" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="奖品名称">
                        <el-input v-model="form.title" type="string" placeholder="显示在转盘上 尽量简短，如果是谢谢参与，请勾选下面的无奖品"></el-input>
                    </el-form-item>
                    <el-form-item label="无奖品">
                        <el-switch v-model="form.no_prize"/>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="form.stock" type="number" placeholder="库存必填"></el-input>
                    </el-form-item>
                    <el-form-item label="中奖概率">
                        <el-input v-model="form.probability" type="number"></el-input>
                    </el-form-item>
 
                    <el-form-item label="排序">
                        <el-input v-model="form.sort" placeholder="数字越大越靠前" type="number"></el-input>
                    </el-form-item>
                     
                    <el-form-item label="">
                        <el-button type='primary' @click="savepro">保 存</el-button>  
                    </el-form-item>
            </el-form>


           </div>
        </el-dialog>
         


    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, inject,onMounted,watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import type { ElForm, FormItemRule} from 'element-plus'
import { ElMessage,ElMessageBox} from 'element-plus'
import createAxios from "/@/utils/axios";
const dialogVisible = ref(false)
const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()

const pro = ref([])
const data = ref([])
const quan = ref([])
const form = ref({'no_prize':false})

watch(
    () => baTable.form.operate!, // 监听operate 以此判断编辑或者新增或其他
    (newVal) => {
        console.log(newVal,'xasdasda')
        if(newVal == 'proList'){
            getPro()
            getCoupon()
            return createAxios({
                url: '/admin/goods.Goods/lists',
                method: 'get',
                params:{}
            }).then(res => {
                    pro.value = res.data.list
                    
            })
 
        }

    },
    { deep: true }
)
const getCoupon = () => {
        return createAxios({
            url: '/admin/mk.Coupon/lists',
            method: 'get',
            params:{}
        }).then(res => {
                quan.value = res.data.list
                
        })
}
const getPro = () =>{
            baTable.form.loading = true
            return createAxios({
                url: '/admin/mk.Wheel/pro',
                method: 'post',
                data:{'act':"prolist",'id':baTable.form.items!.id}
            }).then(res2 => {
                  if(res2.code == 1){
                      data.value = res2.data
                  }
                  baTable.form.loading = false
            })
}
const savepro = () =>{
        return createAxios({
            url: '/admin/mk.Wheel/pro',
            method: 'post',
            data:{"data":form.value,'act':"save",'id':baTable.form.items!.id}
        }).then(res => {
                if(res.code == 1){
                    
                    if(res.data.code == 1){
                        dialogVisible.value = false
                        getPro()
                    }else{
                        ElMessage({'message':res.data.msg,'type':'error'})
                    }
                    
                }
        })
}
const delpro = (id = 0) =>{
            
            return createAxios({
               url: '/admin/mk.Wheel/pro',
               method: 'post',
               data:{'act':"delete",'id':id}
           }).then(res => {
                 if(res.code == 1){
                      
                      if(res.data.code == 1){
                           ElMessage({'message':'已删除','type':'success'})
                           getPro()
                      }else{
                           ElMessage({'message':res.data.msg,'type':'error'})
                      }
                       
                 }
           })
}
</script>
<style>
.aa{
   height: 90vh !important;
}
.table{
     border:1px solid #eee;
     width: 100%;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;text-align: center;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}
.table tr .bg{
    background-color: #f5f7fa;
    font-weight: bold;
    text-align: justify;
}
h4{
    
    margin-bottom: 10px;
    font-size: 17px;
}
</style>
